[アップデート]Amazon Connect Chatのウィジェットでカスタマイズできる内容が増えました(ロゴの追加,メッセージの表示名,CSSの利用)

こんにちは、洲崎です。
Amazon Connect Chatのウィジェットでカスタマイズできるオプションが追加されたので紹介します。

Amazon Connect Chat

Amazon Connect ChatはAmazon Connectで利用できるチャット機能です。
Amazon Connectコンソールの「チャットウィジェット」から、チャット画面を作成することができます。
書体やヘッダーのメッセージ、色・チャットの背景色などを設定可能ですが、今回は新たに追加のカスタマイズオプションが提供されました。
チャットウィジェットはサイドメニューの電話マークから開くことができます。

追加されたもの

今回追加された内容は下記です。

• ロゴの追加
• システムメッセージの表示名(デフォルトは「SYSTEM_MESSAGE」)
• ボットメッセージの表示名(デフォルトは「BOT」)
• テキスト入力プレースホルダー(デフォルトは「メッセージを入力」）
• チャット終了ボタンのテキスト(デフォルトは「チャットを終了」）
• CSSを利用したウィジェットのサイズ・フォントサイズ等の変更

上から見ていきます。(CSSについてはドキュメントをご案内します)

ロゴの追加

S3オブジェクトURLを入力することで、ロゴをチャット画面に表示することが可能となりました。
S3オブジェクトはパブリックアクセスを可能とする必要があります。
S3のオブジェクトURLをコピーして、「S3 ロゴ URL」にURLを貼り付けることで、ロゴを表示することができます。

システムメッセージの表示名

システムメッセージはチャットを開始して流れるプロンプトの内容です。
デフォルトは「SYSTEM_MESSAGE」です。
個人的には変更する内容があまり思いつかないですが、カタカナで「システムメッセージ」とかでいいかと思いましたが、日本語だと文字化けが発生しました。
その為、現状、システムメッセージの表示名を修正する際は英語かローマ字で表示する方がよさそうです。

ボットメッセージの表示名

ボットメッセージはLexを利用する時に表示される内容です。
デフォルトは「BOT」です。
日本語だと文字化けが発生した為、現状は英語かローマ字で表示する方がよさそうです。

テキスト入力プレースホルダー

顧客がテキスト入力をするところに表示する内容です。
デフォルトは「メッセージを入力」です。
日本語だと文字化けが発生した為、現状は英語かローマ字で表示する方がよさそうです。

チャット終了ボタンのテキスト

チャットを終了するところに表示する内容です。
デフォルトは「チャットを終了」です。
日本語だと文字化けが発生した為、現状は英語かローマ字で表示する方がよさそうです。

CSSを利用したウィジェットのサイズ・フォントサイズ等の変更

Amazon Connect Chatはチャットウィジェットで生成されたjavascriptのコードをhtmlに埋め込んで利用します。

このjavascriptに対して、CSSでカスタマイズすることができるようになりました。
CSSのサンプルコードや制約については下記ドキュメントを参照してください。

最後に

Amazon Connect Chatのカスタマイズオプションが追加になりました。
まずはロゴを表示できるようになったのと、日本語で文字化けする部分は、今後のアップデートで対応されるのを期待します。
CSSで柔軟にカスタマイズもできそうなので、より会社のスタイルに合わせたりしたい方は試してみてはいかがでしょうか。

ではまた！コンサルティング部の洲崎でした。